<template>
  <div>
    <a-card :bordered="false">
      <f-search-form :table-obj="$refs.productList">
        <f-search-form-item label="商品名称" name="productName"/>
        <f-search-form-item label="商品分类" name="categoryIds" type="cascader" :options="api.category.list"></f-search-form-item>
      </f-search-form>
      <f-table ref="productList" size="default" rowKey="productId" handler="shopProductSelectHandler" :columns="columns" :operator="operator" :params="queryParam" :api="api.product" @onExpand="onExpand">
        <span slot="productName" slot-scope="text, record, index">
          <ellipsis :length="100" tooltip>
          {{record.productName}}
          </ellipsis>
        </span>
        <span slot="categoryName" slot-scope="text, record, index">
          <a-tag color="pink">{{record.categoryName}}</a-tag>
        </span>
        <span slot="coverImage" slot-scope="text, record, index">
          <img v-lazy="record.coverImage" v-viewer class="radius-img">
        </span>

        <span slot="expandedRowRender" slot-scope="record" style="margin: 0">
          <div class="single-item" v-for="sku in skuList">
            <div class="hold-img"><img v-lazy="getImages(sku)" alt="" width="80" height="80" class="radius-img"></div>
              <p class="spec-title">{{sku.title}}</p>
              <div class="row-term">
                  <p><span class="row-title">价格：</span><span class="price-value">￥{{sku.price}}</span></p>
                  <p><span class="row-title">库存：</span><span class="stock-value">{{sku.num}}</span></p>
              </div>
          </div>
        </span>
      </f-table>

    </a-card>

  </div>
</template>

<script>

  import Ellipsis from '../../../../../components/Ellipsis/Ellipsis'

  export default {
    name: 'ProductSelect',
    components: { Ellipsis },
    props: {
      topicId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        //列表初始化查询参数
        queryParam: {
          topicId: this.topicId
        },
        firstCategory: [],
        onLineState: [{ value: '2', label: '已下架' }, { value: '3', label: '违规下架' }],
        skuList: [],
        // 表头
        columns: [
          {
            title: '封面图',
            align: 'center',
            dataIndex: 'coverImage',
            scopedSlots: { customRender: 'coverImage' }
          },
          {
            title: '商品名称',
            width: '560px',
            dataIndex: 'productName',
            scopedSlots: { customRender: 'productName' }
          },
          {
            title: '商品分类',
            align: 'center',
            dataIndex: 'categoryName',
            scopedSlots: { customRender: 'categoryName' }
          },

          {
            title: '商品价格',
            align: 'center',
            dataIndex: 'productPrice'
          }
        ],
        //操作按钮
        operator: []
      }
    },
    computed: {},
    methods: {
      getSelectedRowKey() {
        return this.$refs.productList.getSelectedRowKey()
      },
      getText: function(value) {
        if (value == 1) {
          return '已上架'
        }
        if (value == 2) {
          return '已下架'
        }
        if (value == 3) {
          return '违规下架'
        }
      },

      getImages(sku) {
        let images = sku.images
        if (images != '' && images.indexOf('[{') > -1) {
          let obj = JSON.parse(images)
          if (obj && obj.length > 0) {
            return obj[0].url
          }
        }
        return images
      },
      onExpand(expanded, record) {
        if (expanded) {
          this.skuList = []
          this.http.get(this, {
            url: this.api.product.getSkuList,
            data: {
              params: {
                productId: record.productId
              }
            },
            success: function(me, data) {
              me.skuList = data
            }
          })
        }
      }
    },
    created() {

    }
  }
</script>
<style scoped lang="less" rel="stylesheet/less">

  .single-item {
    text-align: center;
    float: left;
    margin-right: 8px;
    border: 1px solid #E1E6F0;
    width: 180px;
    height: 180px;
    padding: 10px;
    cursor: pointer;
  }

  .single-item .hold-img {
    padding: 5px;
  }


  .single-item p {
    margin: 0px;
    width: 140px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .single-item .spec-title {
    margin-top: 5px;

    color: #00A0E9;
  }

  .single-item .row-term p {
    width: 160px;
    text-align: left;
  }

  .row-title {
    display: inline-block;
    text-align: center;
    padding-left: 20px;
  }

</style>
